﻿@{
    Style.Require("jQueryUI_Orchard");
    Style.Require("NineSeas.Common");
    Style.Require("FancyBox");
    Style.Require("NineSeas.Reader");
    Style.Require("NineSeas.Book.View");

    Script.Require("jQuery").AtHead();
    Script.Require("FancyBox");
    Script.Require("NineSeas.Common");
    Script.Require("NineSeas.InplaceMessage");
    Script.Require("NineSeas.Reader").AtFoot();
    Script.Require("NineSeas.CommandBar");

    var previousUrl = Url.Action("Toc", "BookView", new { name = Model.Book.NameOnUrl });
    if (Model.Chapters.Count <= 1)
    {
        previousUrl = Url.Action("Index", "BookView", new { name = Model.Book.NameOnUrl });
    }
}
<div id="nineseas">
    <div id="nineseas-reader-header">
        <a href="@Url.Action("Index", "BookView", new {name = Model.Book.NameOnUrl})">
        <div class="header-bullet"></div>
        <h1>@Model.Book.Name</h1> 
        </a>
        <div class="header-author">
            <a href="@Url.Action("Details", "Authors", new {id = Model.Author.Id})">@Model.Author.DisplayName</a>
        </div>
        <div class="part-right">
            @Display(New.Book_ChapterDropDown(
                Book: Model.Book,
                Chapters: Model.Chapters, 
                SelectedChapter: Model.Chapter, 
                IsEdit: false
            ))
        </div>
    </div>
    <div id="nineseas-reader-content">
        @if (Model.Chapter == null || Model.Chapter.Previous == null) {
        <a id="previousPage" href="@previousUrl" class="book-page-navigation">
            <div>
                <div class="icon-direction"></div>
            </div>
        </a>
        } else {
        <a id="previousPage" href="@Url.Action("Chapter", "BookView", new { name = Model.Book.NameOnUrl, chapterIndex = Model.Chapter.Previous })" class="book-page-navigation">
            <div>
                <div class="icon-direction"></div>
            </div>
        </a>
        }

        @if (Model.Chapter.Next != null) {
        <a id="nextPage" href="@Url.Action("Chapter", "BookView", new {name = Model.Book.NameOnUrl, chapterIndex = Model.Chapter.Next})" class="book-page-navigation">
            <div>
                <div class="icon-direction"></div>
            </div>
        </a>
        }
        <div id="content-area" class="reader-area">
            <h1> @(Model.Chapter != null ? 
            !String.IsNullOrEmpty(Model.Chapter.Title) ? Model.Chapter.Title : T("Chapter").Text + " " + (Model.Chapter.SortOrder + 1) 
            : "")</h1>
            @(new MvcHtmlString(Model.Chapter.Content))
            <div style="clear:both"></div>
        </div>         
    </div>
    <div id="nineseas-reader-footer">
    </div>    
    <div id="throbber">
        <div class="curtain"></div>
        <div class="curtain-content">
            <div>
                <h1>@T("Processing ...")</h1>
                <p>
                    <img src="@Href("~/Modules/NineSeas/images/synchronizing.gif")" alt="" />
                </p>
            </div>
        </div>
    </div>
</div>
<div id="commentArea" style="display: none">
    <div class="fb-comments" data-href="@Url.Action("Index", "BookView", new {name = Model.Book.NameOnUrl}, Request.Url.Scheme)" 
        data-num-posts="@Model.Settings.FbCommentsNumberOfPosts" 
        data-width="@Model.Settings.FbCommentsWidth" 
        data-colorscheme="@Model.Settings.FbCommentsColorScheme"></div>
</div>
<div class="books-paging">
</div>
<script type="text/javascript">
    $(document).ready(function () {
        if ($("#commentArea").length > 0 && $("#nineseas-reader-footer").length > 0) {
            $.commandBar('#nineseas-reader-footer', {
                left: [
                    {
                        id: 'likeButton',
                        type: 'a', // button | a
                        href: 'javascript:;',
                        classes: ['@(Model.IsLiked ? "liked" : "like")'],
                        caption: '@(Model.IsLiked ? T("Liked") : T("Like"))',
                        isEnabled: true,
                        enabled: null,
                        onClick: function () {
                            var isLiked = $("#likeButton").hasClass("liked");

                            $.get("@Url.Action("Like", "BookView", new {name = Model.Book.NameOnUrl})",
                                {
                                    like: isLiked ? '0' : '1' // currently liked => unlike
                                },
                                function (data) {
                                    if (data && data.success) {
                                        if (data.caption) {
                                            $("#likeButton").html(data.caption);
                                        }

                                        if (isLiked) {
                                            $("#likeButton").removeClass("liked").addClass("like");
                                        } else {
                                            $("#likeButton").removeClass("like").addClass("liked");
                                        }
                                    }
                                },
                                "json");
                        }
                    },
                    {
                        id: 'commentButton',
                        type: 'a', // button | a
                        href: '#commentArea',
                        classes: [],
                        caption: '@T("Comment")',
                        isEnabled: true,
                        enabled: null,
                        onClick: function () { }
                    }
                ],
                right: [$(".books-paging")]
            });
                $("#commentButton").fancybox({
                    width: '600px',
                    height: '90%',
                    autoSize: false,
                    openEffect: 'none',
                    closeEffect: 'none'
                });
            }
    });
</script>